selectType.html{extend name="layout/layout" /}

{block name="navbar"}{/block}

{block name="style"}
<style>
	.status-header{
		padding: 20px;
		background: #e60012;
		color:#fff;
		line-height: 30px;
		border-top: 1px solid #fff;
	}

	.detail-info{
		padding: 10px;
	}

	.mui-media{
		background: #F5F5F5;
	}

	.mui-card{
		margin: 10px 0 0 ;
	}
</style>
{/block}

{block name="main"}
	<div class="detail" v-cloak>
	
		<div class="status-header">
			<div class="status-tips">{{detail.status_text}}</div>
			<div class="status-time" v-if="detail.end_time">剩余时间：{{detail.end_time}}</div>
		</div>
		
		
		<div class="info">
			<div class="mui-card">
				<!--页眉，放置标题-->
				<div class="mui-card-header business-name">
					<div class="mui-col-xs-12 mui-text-left">
						退款信息
					</div>
				</div>
				<!--内容区-->
				<div class="mui-card-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" :src="detail.original_image">
								<div class="mui-media-body">
									<div class="mui-ellipsis-2">{{detail.goods_name}}</div>
									<p class='mui-ellipsis'>{{detail.spec_name}}</p>
								</div>
							</a>
						</li>
					</ul>
					<div class="detail-info">
						<p v-if="detail.goods_status">货物状态：{{detail.goods_status}}</p>
						<p v-if="detail.return_reason">退款原因：{{detail.return_reason}}</p>
						<p v-if="detail.exchange_reason">换货原因：{{detail.exchange_reason}}</p>
						<p v-if="detail.amount">退款金额：{{detail.amount}}</p>
						<p v-if="detail.content">申请说明：{{detail.content}}</p>
						<p v-if="detail.create_time">申请时间：{{detail.create_time}}</p>
						<p v-if="detail.shipping_name">快递公司：{{detail.shipping_name}}</p>
						<p v-if="detail.shipping_no">快递单号：{{detail.shipping_no}}</p>
					</div>
				</div>
				<div class="mui-card-footer status">
					<div class="mui-col-xs-12 mui-text-left">
						<i class="mui-icon text-theme iconfont icon-tuikuantuihuo" v-if="detail.type == 1"></i>
						<i class="mui-icon text-theme iconfont icon-servicewuyoutuihuanhuo1" v-if="detail.type == 2"></i>
						<i class="mui-icon text-theme iconfont icon-quannianbaohuan" v-if="detail.type == 3"></i>
						&nbsp; {{detail.type_text}}
					</div>
				</div>
				<!--页脚，放置补充信息或支持的操作-->
				<div class="mui-card-footer" v-if="detail.status == 1 || detail.status == 3 || detail.status == 4">
					<div class="mui-col-xs-12 mui-text-right">
						<!--不是已经取消或者结束的才能取消-->
						<a href="" class="mui-btn mui-btn-theme mui-btn-outlined" @tap.prevent="cancel(detail)" v-if="detail.status != 0 && detail.status != 2">撤销申请</a>
						<!-- <a href="" class="mui-btn mui-btn-theme mui-btn-outlined" @tap.prevent="edit(detail)" v-if="detail.status != 0 && detail.status != 2">修改申请</a> -->
						<a href="" class="mui-btn mui-btn-theme mui-btn-outlined" @tap.prevent="apply_service(detail)" v-if="detail.status == 3">客服介入</a>
					</div>
				</div>
			</div>
		</div>

		<div class="history">
			<div class="mui-card">
				<!--页眉，放置标题-->
				<div class="mui-card-header">协商详情</div>
				<!--内容区-->
				<div class="mui-card-content">
					<ul class="mui-table-view">
					    <li class="mui-table-view-cell" v-for="item in detail.item">
					    	<div>{{item.role}}</div>
					    	<p>{{item.create_time}}</p>
					    	<p>【标题】{{item.title}}</p>
					    	<p>【内容】{{item.content}}</p>
					    </li>
					</ul>
				</div>
			</div>	
		</div>
	</div>
{/block}
{block name="script"}
<script>
	var new_vue = new Vue({
		el: '.detail',
		data: {
			get_datas: {$datas},
			detail:'',
		},
		mounted: function(){
			this.get_detail();
		},
		methods: {
			//获取售后详情
			get_detail: function(){
			    layer.open({
				    type: 2,
				    shadeClose: false,
			    });

			   	var that = this;	
			    request(that, 
			    	{'url': 'after_sales/detail', 'data': {'id': that.get_datas.id}},
			    	function(res){
				        that.detail = res.data;
				    }
			    )
			},
			//取消售后申请
            cancel: function(item) {
			    var that = this;
			    mui.confirm('确定撤销该申请吗？','提示',['确定', '取消'], function(e){
			        if(e.index == 0) {
			            layer.open({
				            type: 2,
				            shadeClose:false
			            })

			            that = this;
                        request(that, {'url': 'after_sales/cancel', 'data': {id:item.id}},
					        function(res){
                                if(resData.code == 200) {
                                    mui.alert(resData.msg, '提示', function(){
                                        that.get_detail();
                                    })
                                } else {
                                    mui.alert(resData.msg,'提示');
                                }
					             
					        }
				        )
			        }
			    })
            },
            //申请客服介入
            apply_service: function(item) {
			    var that = this;
			    mui.confirm('确定申请客服介入吗？','提示',['确定', '取消'], function(e){
			        if(e.index == 0) {
			            layer.open({
				            type: 2,
				            shadeClose:false
			            })

 						that = this;
                        request(that, {'url': 'after_sales/applyService', 'data': {id:item.id}},
					        function(res){
                                if(resData.code == 200) {
                                    mui.alert(resData.msg, '提示', function(){
                                        that.get_detail();
                                    })
                                } else {
                                    mui.alert(resData.msg,'提示');
                                }
					             
					        }
				        )
			        }
			    })
            },
            //修改申请
            edit: function(item) {
            	location.href = '/mobile/aftersales/apply/after_id/'+item.id+'/after_type/'+item.type;
            }
		}
	});
</script>
{/block}
